<script setup>
import { ref } from 'vue'
let startButton = ref(null)
let stopButton = ref(null)
let video = ref(null)
let downloadLink = ref(null)
function getLocation() {
    console.trace()
    if (navigator.geolocation) {
        // 步骤 2: 获取定位
        navigator.geolocation.getCurrentPosition((position) => {
            const latitude = position.coords.latitude; // 获取纬度
            const longitude = position.coords.longitude; // 获取经度
            // console.log(latitude, longitude)
            // console.clear()
        }, (error) => {

        });
    }
}


let mediaRecorder;
let recordedChunks = [];

async function startRecording() {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    video.srcObject = stream;

    mediaRecorder = new MediaRecorder(stream);

    mediaRecorder.ondataavailable = function (event) {
        if (event.data.size > 0) {
            recordedChunks.push(event.data);
        }
    };

    mediaRecorder.onstop = function () {
        // const blob = new Blob(recordedChunks, { type: 'video/webm' });
        const blob = new Blob(recordedChunks, { type: 'video/mp4' });
        const url = URL.createObjectURL(blob);
        downloadLink.value.href = url;
        downloadLink.value.download = 'recording.mp4';
        downloadLink.value.style.display = 'block';
        recordedChunks = [];
    };

    mediaRecorder.start();
    startButton.value.disabled = true;
    stopButton.value.disabled = false;
}

function stopRecording() {
    mediaRecorder.stop();
    startButton.value.disabled = false;
    stopButton.value.disabled = true;
}
</script>

<template>
    <header>
        <video ref="video" controls />
        <button ref="location" @click="getLocation()">定位</button>
        <button ref="startButton" @click="startRecording()">开始录像</button>
        <button ref="stopButton" @click="stopRecording()">停止录像</button>
        <a ref="downloadLink">下载录像</a>
        <a href="vscode://open/">打开vscode</a>
    </header>
</template>